<template>
  <!-- 缺陷对比分析表 -->
  <div class="capacity">
    <!-- 搜索框 -->
    <div class="capation_serch">
      <el-form class="table_serch">
        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title" >机种编码</div>
          <el-autocomplete
            size="mini"
            popper-class="my-autocomplete"
            style="
              width: 135px;
              height: 30px;
              margin-left:9px;
              margin-top:8px;
            "
            v-model="formInline.recipe"
            @input="(e) => (formInline.recipe = validForbid(e))"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          >
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="handleIconClick"
            >
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>
        </div>
        <!-- 工业 -->
        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">工单编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.order"
              @input="(e) => (formInline.order = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">线体编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.line"
              :fetch-suggestions="querySearch"
              @input="(e) => (formInline.line = validForbid(e))"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">站点编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 135px; margin-left: 10px"
              v-model="formInline.site"
              @input="(e) => (formInline.site = validForbid(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">班次编码</div>
          <el-form-item label="">
            <el-autocomplete
              size="mini"
              popper-class="my-autocomplete"
              style="width: 140px; margin-left: 10px"
              v-model="formInline.class"
              @input="(e) => (formInline.class = validname(e))"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            >
              <i
                class="el-icon-edit el-input__icon"
                slot="suffix"
                @click="handleIconClick"
              >
              </i>
              <template slot-scope="{ item }">
                <div class="name">{{ item.value }}</div>
                <span class="addr">{{ item.address }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:0px">
          <div class="table_serch_labe_title">起始日期1</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              v-model="formInline.starttime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width: 140px; margin-left: 10px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title" >
            结束日期1
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="formInline.endtime"
              type="date"
              placeholder="选择日期"
              style="width: 135px; margin-left: 3px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left: 0px">
          <div class="table_serch_labe_title">起始日期2</div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="formInline.starttime1"
              type="date"
              placeholder="选择日期"
              style="width: 140px; margin-left: 8px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe">
          <div class="table_serch_labe_title" style="margin-left:-7px">
            结束日期2
          </div>
          <el-form-item label="">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="formInline.endtime1"
              type="date"
              placeholder="选择日期"
              style="width: 140px; margin-left: 6px"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <div class="table_serch_labe" style="margin-left:45.6%">
          <el-button type="mini"
           style="height:30px;margin-top:5px"
           @click="Defectcontrast">查询</el-button>
          <!-- <el-button type="mini">刷新</el-button>
          <el-button type="mini">运行</el-button> -->
        </div>
      </el-form>
    </div>

    <div class="hader_cent">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="良率对比分析" name="first">
          <!-- 折线图  1-->
          <div id="capaction_one"></div>
        </el-tab-pane>
        <el-tab-pane label="产能对比分析" name="second">
          <!-- 折线图 2 -->
          <div id="capaction_two"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 列表 -->
    <div class="capaction_list">
      <!-- <el-table :data="list" border style="width: 100%; height: 20">
        <el-table-column prop="date"></el-table-column>
        <el-table-column
          v-for="(item, index) in tasy.title"
          :key="index"
          :label="item"
        >
        </el-table-column>
      </el-table> -->
    </div>

    <div class="table_loding" v-show="isshow">
      <div class="table_title">加载中.......</div>
      <div class="table_timer">请求延时:{{ timer }}</div>
    </div>


    <Popup
      v-show="Popup_show"
      @ClosePopup="ClosePopup"
      @cancelget="cancelget"
      :timer="timer"
    ></Popup>
  </div>
</template>

<script>
import axios from "axios";
import Popup from "../../Pop-up/Pop-up";
export default {
  components: { Popup },
  data() {
    return {
      Popup_show: false,
      timer: 0,
      isshow: false,
      activeName: "first",
      valtimer: "",
      list: [],
      tasy: {
        title: ["9295", "ABI", "AFI", "DOA", "EAC"],
        tableData: [
          {
            date: "ETTS0986765616272657",
            name: "ok",
            address: "ok",
            aname: "ok",
            aaddress: "ok",
          },
          {
            date: "ETTS0986765616272657",
            name: "ok",
            address: "ok",
            aname: "ok",
            aaddress: "ok",
          },
          {
            date: "ETTS0986765616272657",
            name: "ok",
            address: "ok",
            aname: "ok",
            aaddress: "ok",
          },
        ],
      },
      formInline: {
        recipe: "VR2-1-24",
        order: "",
        line: "",
        site: "",
        starttime: "2021-01-03",
        endtime: "2021-01-14",
        starttime1: "2021-01-05",
        endtime1: "2021-01-15",
        errorcode: "",
        class: "",
        personid: "",
        type: [],
      },
      options: [
      
      ],
      restaurants: [],
      continuedata: [],
      contiondata2: [],
      continout1: [],
      continout2: [],
    };
  },
  mounted() {
    this.list = this.tasy.tableData;
    // console.log(this.list);
    // this.restaurants = this.loadAll();
  },

  updated: function () {
    console.log("更新");
  },

  methods: {
    removetmer() {
      this.isshow = false;
      clearInterval(this.valtimer);
      this.timer = 0;
    },

    //计时器
    timerclick() {
      this.valtimer = setInterval(() => {
        this.isshow = true;
        this.timer++;
      }, 1000);
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },
    Defectcontrast() {
      setTimeout(() => {
        if (this.continuedata.length == "") {
          this.Popup_show = true;
          this.Popup_timer = setInterval(() => {
            this.timer++;
          }, 1000);
        } else {
          return;
        }
      }, 5000);

      if (navigator.onLine) {
        console.log("网络已连接");
        this.removetmer();
      } else {
        console.log("已断网");
        setTimeout(() => {
          this.timerclick();
        }, 3000);
      }
      if (this.formInline.recipe == "") {
        this.$alert("机种编码不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.starttime == "") {
        this.$alert("日期1不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime == "") {
        this.$alert("日期1不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.starttime1 == "") {
        this.$alert("日期2不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime1 == "") {
        this.$alert("日期2不能为空", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime < this.formInline.starttime) {
        this.$alert("日期1不能小于起始日期1", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else if (this.formInline.endtime1 < this.formInline.starttime1) {
        this.$alert("日期2不能小于起始日期2", "消息提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$message({
              type: "info",
              message: `action: ${action}`,
            });
          },
        });
      } else {
        const CancelToken = axios.CancelToken;
        this.ajax({
          url: "Comparative",
          method: "GET",
          params: {
            data: this.formInline,
          },
          cancelToken: new CancelToken((c) => {
            this.cancel = c;
          }),
        }).then((res) => {
          if (res.data == 0) {
            console.log("没有数据");
            setTimeout(() => {
              this.isshow = true;
              this.timerclick();
            }, 3000);
          }
          // console.log(res.data);
          var reult = res.data;
          if (reult.code == 200) {
            console.log(reult.data);
            this.continuedata = reult.data.Quality1;
            this.contiondata2 = reult.data.Quality2;
            this.continout1 = reult.data.out1;
            this.continout2 = reult.data.out2;
            if (this.continuedata) {
              this.capaction_one();
              this.capaction_two();
            }
          } else if (reult.code == 204) {
            this.$alert(reult.message, "消息提示", {
              confirmButtonText: "确定",
              callback: (action) => {
                this.$message({
                  type: "info",
                  message: `action: ${action}`,
                });
              },
            });
          }
        });
      }
    },

    ClosePopup() {
      this.Popup_show = false;
      clearInterval(this.Popup_timer);
    },

    cancelget() {
      console.log("-----------------------终止请求");
      this.Popup_show = false;
      this.cancel();
      clearInterval(this.Popup_timer);
    },
    //  折线图 1
    capaction_one() {
      let capaction_one = this.$echarts.init(
        document.getElementById("capaction_one")
      );
      // var date = sessionStorage.getItem("contrast");
      // var continuedata = JSON.parse(date);
      let capactionls1 = this.continuedata;
      // console.log(capactionls1);
      let capactionts2 = this.contiondata2;
      // console.log(capactionts2);

      var datakey = [];
      var dataval = [];
      for (let i = 0; i < capactionts2.length; i++) {
        datakey.push(capactionts2[i].day);
        dataval.push(capactionts2[i].Quality);
        //  console.log('--------------',capactionts2[i].Quality)
      }
      // console.log('第一个折线图',dataval)
      // console.log('第一个折线图',datakey)
      var capactionlsname = [];
      var capactionlsval = [];
      for (let i = 0; i < capactionls1.length; i++) {
        capactionlsname.push(capactionls1[i].day);
        capactionlsval.push(capactionls1[i].Quality);
      }
      //  console.log('第二个折线图',capactionlsval)
      // console.log(continuedata)
      capaction_one.setOption({
        title: {
          // text: "连续性关联缺陷系数对比统计",
          x: "center",
          y: "30",
          textStyle: {
            fontSize: 20,
            fontWeight: 300,
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
          ],
          axisLabel: {
            textStyle: {
              fontSize: 8,
            },
          },
        },
        legend: {
          data: ["条件一", "条件二"],
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: "条件一",
            data: capactionlsval,
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
          {
            name: "条件二",
            data: dataval,
            type: "line",
            itemStyle: {
              color: "#5793f3",
              normal: {
                lineStyle: {
                  color: "#0000FF",
                },
                label: {
                  show: true,
                },
              },
            },
          },
        ],
      });
    },

    // 折线图 2
    capaction_two() {
      let capaction_two = this.$echarts.init(
        document.getElementById("capaction_two")
      );
      // var date = sessionStorage.getItem("contrast");
      // var contiondata = JSON.parse(date);
      var densitya = this.continout1;
      var densityb = this.continout2;
      console.log(densitya);
      var denval = [];
      var denkey = [];
      for (let i = 0; i < densitya.length; i++) {
        denval.push(densitya[i].outPut);
        denkey.push(densitya[i].day);
      }
      // console.log("第二个折线图", denval);
      // console.log("第二个折线图", denkey);
      var denvalin = [];
      for (let i = 0; i < densityb.length; i++) {
        denvalin.push(densityb[i].outPut);
      }
      capaction_two.setOption({
        title: {
          // text: "密集型关联缺陷系数对比统计",
          x: "center",
          y: "30",
          textStyle: {
            fontSize: 20,
            fontWeight: 300,
          },
        },
        xAxis: {
          type: "category",
          data: [
            "1(日)",
            "2(日)",
            "3(日)",
            "4(日)",
            "5(日)",
            "6(日)",
            "7(日)",
            "8(日)",
            "9(日)",
            "10(日)",
            "11(日)",
            "12(日)",
            "13(日)",
          ],
          axisLabel: {
            textStyle: {
              fontSize: 8,
            },
          },
        },
        legend: {
          data: ["条件一", "条件二"],
          right: "10%",
          top: "10%",
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            formatter: "{value}",
            interval: "auto",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />",
        },
        series: [
          {
            name: "条件一",
            data: denval,
            type: "line",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
              },
            },
          },
          {
            name: "条件二",
            data: denvalin,
            itemStyle: {
              color: "#5793f3",
              normal: {
                lineStyle: {
                  color: "#0000FF",
                },
                label: {
                  show: true,
                },
              },
            },
            type: "line",
          },
        ],
      });
    },

    loadAll() {
      return [{ value: "", address: "" }];
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    },
  },
};
</script>

<style  scoped>
.capacity {
  width: 100%;
  /* border: 1px solid #000; */
}
.capation_serch {
  width: 100%;
  /* border: 1px solid red; */
}
#capaction_one {
  width: 1300px;
  height: 490px;
  margin-top: 10px;
  margin-left:10%;
  background: #ffffff;
}
#capaction_two {
  width: 1300px;
  height: 490px;
  margin-top: 10px;
  margin-left:10%;
  background: #ffffff;
}
.capaction_list {
  width: 100%;
  /* border: 1px solid blue; */
  margin-top: 10px;
  background: #ffffff;
}

.table_serch {
  width: 100%;
  min-width: 1000px;
  padding-top: 8px;
  /* border: 1px solid red; */
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border: 1px solid #000; */
  height: 35px;
  display: flex;
  margin-left: 10px;
  margin-bottom: 10px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}
.el-button_eb {
  margin-left: 5px;
  color: #fff;
}

.hader_cent {
  width: 100%;
  background: #fff;
  /* border: 1px solid red; */
  /* height:495px; */
  margin-top: 20px;
}

.table_loding {
  width: 200px;
  height: 100px;
  border: 1px solid rgb(68, 186, 236);
  position: absolute;
  z-index: 999;
  top: 40%;
  left: 40%;
  border-radius: 5px 5px 5px 5px;
  box-shadow: 0px 0px 0px 1px;
}

.table_title {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
.table_timer {
  color: rgb(101, 91, 91);
  font-size: 20px;
  text-align: center;
  line-height: 10px;
}
</style>